/*
 * @Description: 大前端学习
 * @Version: H5
 * @Author: Ajax
 * @Date: 2020-05-17 17:12:50
 * @LastEditors: Ajax
 * @LastEditTime: 2020-05-17 21:10:54
 */

// 怎么思路清晰怎么来~~~~~

/**
 * 需求
 * 1 动态生成导航按钮
 * 2 点击按钮切换图片
 * 3 上一张下一张点击切换
 * 4 无缝轮播
 * 5 自动轮播
 * 6 鼠标hover事件交互
 */

/** 获取 */
const $photoBox = $('.photos-con')
const $nextBtn = $('.next')
const $prewBtn = $('.prew')
const $btns = $('.btns')
const $box = $('.box')

/**  移动的固定宽度 */
const size = $photoBox.children[1].offsetWidth
let count = $photoBox.children.length
let index = 0

/** 循环方法 */
function forLoop(begin, arr, callback) {
    for (let i = 0, len = arr.length; i < len; i++) {
        callback && callback(i)
    }
}

/**  1 动态生成导航按钮 */
forLoop(0, $photoBox.children, function (i) {
    // 创建  li 元素
    let liEle = document.createElement('li')

    // 插入 li 元素
    $btns.appendChild(liEle)

    // 第一个元素绑定 类名
    if ($btns.children[0]) {
        $btns.children[0].className = 'current'
    }

    // 记录 li 的索引
    liEle.setAttribute('data-index', i)

    /** 2 点击导航按钮  */
    liEle.onclick = liEleClick
})

/**  排他清除样式 */
function clearStyle() {
    forLoop(0, $btns.children, function (i) {
        $btns.children[i].className = ''
    })
}


/**  导航按钮点击方法 */
function liEleClick() {
    /**  2.1 清除样式 */
    clearStyle()
    this.className = 'current'
    /** 2.2 点击序号, 动画的方式切换到相应的图片 */
    // 2.2.1 拿到当前 li 的 索引
    let nowIndex = this.getAttribute('data-index')

    /** 7 点击按钮再切换下一张bug修复 */
    index = nowIndex
    console.log(nowIndex)
    animate($photoBox, -nowIndex * size)

}

/**  3 上一张下一张点击切换  */
nextBtnActive()
prewBtnActive()
function nextBtnActive() {
    $nextBtn.addEventListener('click', function () {
        /** 4.2 无缝处理 */
        if (index == count) {
            $photoBox.style.left = 0 + 'px'
            index = 0
        }

        //  克隆的元素没有对于的导航按钮, index 提出if语句
        index++
        if (index < count) {
            // 核心代码 模拟手动点击导航按钮 , 减少许多代码量和繁琐的逻辑
            $btns.children[index].click()
        } else {
            animate($photoBox, -index * size)
            clearStyle()
            $btns.children[0].className = 'current'
        }

    })
}
function prewBtnActive() {
    $prewBtn.addEventListener('click', function () {
        if (index == 0) {
            index = count
            $photoBox.style.left = - index * size + 'px'
        }
        index--
        $btns.children[index].click()
        //  如果是第一张需要一个方法实现无缝滚动
        // if (index > 0) {
        //     index--
        //     $btns.children[index].click()
        // } else {

        // }
    })
}

/*   自动模拟事件触发
document.body.onclick = function () {
    console.log(1);
}
*/

/** 4 无缝轮播 */
perfectPlay()
function perfectPlay() {
    /** 4.1 克隆 $photoBox的第一个元素 添加到最后  */
    let firstEle = $photoBox.children[0].cloneNode(true)
    $photoBox.appendChild(firstEle)

}

/** 5 自动轮播 */
let timeId = setInterval(() => {
    $nextBtn.click()
}, 5000)


/** 6 鼠标hover事件交互 无冒泡*/
$box.addEventListener('mouseenter', () => {
    clearInterval(timeId)
    /** 内存释放 */
    timeId = null
})
$box.addEventListener('mouseleave', () => {
    timeId = setInterval(() => {
        $nextBtn.click()
    }, 5000)
})
/** 7 点击导航按钮在点击下一张bug修复 */

/** 8 节流阀 */